<template>
	<view>
		<model-calendar 
		:sendYear="toYear" :sendMonth="toMonth"
		:dataSource="signData" :totalNum="sumCount"
		 @dateChange="getData" @clickChange="clickRegister"	 >
		 </model-calendar>
		<view class='count'>
			<text>截至目前，已坚持打卡</text>
			<view class='daynumber'>
				<text class='number'>{{sumCount}}</text>
				<text class='day'>天</text>
			</view>

			<view>本月累积打卡<text class="monthSum">{{signData.length}}</text>天,累计积分<text class="monthSum">{{credit}}</text>分</view>
			<text>请再接再厉，继续努力!</text>
		</view>
	</view>
</template>

<script>
	import modelCalendar from '@/components/Calendar.vue';

	export default {
		data() {
			return {
				toYear: parseInt(new Date().getFullYear()), //本年
				toMonth: parseInt(new Date().getMonth() + 1), //本月
				today:parseInt(new Date().getDate()) , //本日
				sumCount: 0,
				signData: [],
				credit:0
			};
		},
		components: {
			modelCalendar
		},
		created() {
			//获取当前用户当前任务的签到状态  			
			this.getData(this.toYear+"-"+this.toMonth);
			// _that = this
			uni.request({
				url: 'http://wd1900144.pro.wdcase.com/carApi/user.php',
				method: 'GET',
				data: {
					act:'update',
					credit:0,
					id:uni.getStorageSync('setUserData').id
				},
				success: res => {
					this.credit = res.data.credit;
				},
				fail: () => {},
				complete: () => {}
			});
		},
		methods: {
		
			clickRegister(day) {
					let that = this;
				console.log(day);
				this.signData.push(day);
				this.sumCount++
				uni.request({
					url: 'http://wd1900144.pro.wdcase.com/carApi/user.php',
					method: 'GET',
					data: {
						act:'cal',
						day:day,
						state:'1'
					},
					success: res => {
						if (res.error==0) {
							
							//积分累积和扣除 在前端只提交累积的分数，在后端进行计算
							//ps:积分扣除在组件写
							
							let credit;
							var week = new Date(day).getDay();
							if(week==0||week==6){
								credit = 2;
							}else {credit=1};
	
							uni.request({
								url: 'http://wd1900144.pro.wdcase.com/carApi/user.php',
								method: 'GET',
								data: {
									act:'update',
									credit:credit,
									id:uni.getStorageSync('setUserData').id
								},
								success: res => {
									this.credit = res.data.credit;
									uni.showToast({
										title: "打卡成功"+day,
										icon: 'success',
										duration: 2000
									});
								},
							});
						}
					},
					fail: () => {},
					complete: () => {}
				});
			},
			//当模板的时候可以直接引入，然后触发子组件事件到父界面去控制数据

			//获取当前用户该任务的签到数组
			getData(val) {
				// console.log(val);
				//获取当天的年月
				let y=val.split('-')[0];
				let m=val.split('-')[1];
				//获取签到数量
				uni.request({
					url: 'http://wd1900144.pro.wdcase.com/carApi/user.php',
					method: 'GET',
					data: {
						act:'callook',
						val:val
					},
					success: res => {
						
						//获取当月签到的天数数组
						let arr = res.data.num;
						let num = [];
						
						for(let x in arr){
							 num.push(arr[x].day.split('-')[2]); 	
						}
						console.log(num);
						//获取签到全部数量
						this.sumCount = res.data.total.c;
						if (y == this.toYear && m == this.toMonth) {
							let newSign=[],today=new Date().getDate();
							
							//按年月日整理
							for(let i=0;i<num.length;i++){
								if(parseInt(num[i])>today){
									break;
								}
								newSign.push(y+"-"+m+"-"+num[i])
							}
							this.signData = newSign;
							// console.log(this.signData);
						} else {
							//进行判断 如果是本月需要判断是否超过今天，超过今天不需要显示
						//	如果是上个月,则不需要进行判断是否超过今天
							
							let newSign=[];
							
							//按年月日整理
							for(let i=0;i<num.length;i++){
								
								newSign.push(y+"-"+m+"-"+num[i])
							}
							this.signData = newSign;
						 }
						console.log(this.signData);
					
						 
					},
					fail: () => {},
					complete: () => {}
				});
				
				
				// })
			},
		}
	}
</script>

<style lang='scss'>
	.count .daynumber {
		display: flex;
		flex-direction: row;
		justify-content: center;
	}

	.count .daynumber .day {
		margin-top: 50rpx;
	}

	.count {
		margin: 20rpx;
		padding: 30rpx;
		display: flex;
		text-align: center;
		border-radius: 10px;
		flex-direction: column;
		justify-content: center;
		background-color: #fff;
		align-items: center;
	}

	.count .number {
		color: #fff;
		font-size: 60rpx;
		background-color: #94db98;
		width: 100rpx;
		height: 100rpx;
		border-radius: 50%;
		display: flex;
		flex-direction: column;
		justify-content: center;
		margin: 20rpx;
	}

	.monthSum {
		color: red;
		font-size: 40rpx;
	}

	.count text {
		margin: 10rpx;
	}
</style>
